<template>
 <div id="main">
     <div id="top" style="text-align:center;font-size:20px;color:#00B5FF;">
         <p>服务机构注册信息待审核列表</p>
     </div>
     <div>
        <label>机构编号：</label>
        <Input v-model="page.action_data.number" style="width:200px"></Input>
        <label>机构名称：</label>
        <Input v-model="page.action_data.enterprise_name" style="width:200px"></Input>
        <Button type="primary" icon="ios-search" @click="search" >搜索</Button>
     </div>
     <div id="content" style="margin-top:12px;">
         <Table border :columns="firm_service_table.columns" :data="list"></Table>
         <Modal width="720" ref="detail" :mask-closable="false" :scrollable="false">
           <p slot="header" style="color:#f60;text-align:center">
                <Icon type="asterisk"></Icon>
                <span>{{member.enterprise_name}}</span>
           </p>
           <div style="margin-left:20px;" class="sheet">
                <p style="color:#8BC34A;font-size:15px;">详细信息</p>
                <!-- <Table border :columns="firm_service_introduce.columns" :data="introduce_list"></Table> -->
                <table>
                    <thead>
                        <tr>
                            <th style="width:20%">审核项</th>
                            <th>内容</th>
                        </tr>
                    </thead>
                    <tr>
                        <td>服务机构编号</td>
                        <td>{{member.number}}</td>
                    </tr>
                    <tr>
                        <td>服务机构名称</td>
                        <td>{{member.enterprise_name}}</td>
                    </tr>
                    <tr>
                        <td>统一社会信用代码</td>
                        <td>{{member.usci}}</td>
                    </tr>
                    <tr>
                        <td>营业执照编号</td>
                        <td>{{member.business_licence}}</td>
                    </tr>
                    <tr>
                        <td>营业执照照片</td>
                        <td><img :src="member.business_licence_pic.dataUrl" style="width:90%;text-align:center;" width="400" height="300" @click="showBIgImg(member.business_licence_pic.dataUrl)"/></td>
                    </tr>
                    <tr>
                        <td>注册资本</td>
                        <td>{{member.registered_capital}} 万元</td>
                    </tr>
                    <tr>
                        <td>服务机构简介</td>
                        <td><p style="text-indent:25px;">{{member.enterprise_profile}}</p></td>
                    </tr>
                    <tr>
                        <td>服务机构类型</td>
                        <td>{{member.member_type}}</td>
                    </tr>
                    <tr>
                        <td>所在地区</td>
                        <td>{{member.area}}</td>
                    </tr>
                    <tr>
                        <td>Logo</td>
                        <td><img :src="member.logo.dataUrl" style="width:90%;text-align:center;" width="400" height="300" @click="showBIgImg(member.logo.dataUrl)"/></td>
                    </tr>
                    <tr>
                        <td>联系人姓名</td>
                        <td>{{member.name}}</td>
                    </tr>
                    <tr>
                        <td>手机号</td>
                        <td>{{member.mobile_phone}}</td>
                    </tr>
                    <tr>
                        <td>部门</td>
                        <td>{{member.department}}</td>
                    </tr>
                    <tr>
                        <td>注册时间</td>
                        <td>{{Date.formatTimeStamp(member.create_time)}}</td>
                    </tr>
                </table>
            </div>
            <div slot="footer" style="text-align:center;">
                <Button type="primary" size="large"  @click="pass">审核通过</Button>
                <Button type="error" size="large"  @click="fail()">审核未通过</Button>
                <div v-if="formItem.is_show" style="margin-top:10px;">
                    <Form ref="refReason" :model="formItem" :rules="isEmpty" :label-width="100">
                        <FormItem label="未通过原因：" prop="textarea" >
                            <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入审核未通过的原因" id="text"></Input>
                        </FormItem> 
                    </Form>
                </div>
            </div>
        </Modal>
     </div>
     <Modal ref="bigImg" :mask-closable="false" :scrollable="false">
         <img :src="big_img_url" style="width: 100%">
     </Modal>
     <AutoPage v-model="page"></AutoPage>
 </div>
</template>
<script>
    import Page from "@/common/model/Page";
    //import Member from "./model/Firm_service_check.js";
    import Member from "@/common/model/Member.js"
    import AutoPage from "@/common/components/AutoPage";
    import parent from "../Parent";
export default {
    //分页
    extends:parent,
    components:{
        AutoPage
    },
    data(){
        return {
            page:new Page("check/services"),
            formItem:{
                textarea:'',
                is_show:false
            },
            isEmpty:{
                textarea:[
                    {required: true, message: '请输入审核未通过的原因', trigger: 'blur'}
                ]
            },
            // firm_service_introduce: {
            //     columns:[
            //         {
            //             title:'审核项',
            //             width:120,
            //             key:'name'
            //         },
            //         {
            //             title:'内容',
            //             key:'value'
            //         }
            //     ],
            //     keys: {
            //         "名称": "enterprise_name",
            //         "简介": "enterprise_profile"
            //     }
            // },
            firm_service_table:{
                columns:[
                    {
                        title: '服务机构编号',
                        render: (h ,params) => {
                            console.log(params.row);
                            return h('div',[
                            h('strong', params.row.number)
                            ])
                        }
                    },
                    {
                        title: '服务机构名称',
                        render: (h, params) => {
                        return h('div', [
                            h('strong', params.row.enterprise_name)
                        ]);}  
                    },
                    {
                        title: '注册资本',
                        render: (h, params) => {
                        return h('div', [
                            h('strong', params.row.registered_capital)
                        ]);} 
                    },
                    {
                        title: '所在地区',
                        render: (h, params) => {
                        return h('div', [
                            h('strong', params.row.area)
                        ]);} 
                    },
                    {
                        title: '营业执照注册号',
                        render: (h, params) => {
                        return h('div', [
                            h('strong', params.row.business_licence)
                        ]);} 
                    },
                    {
                        title: '联系人姓名',
                        render: (h, params) => {
                        return h('div', [
                            h('Icon', {
                                props: { type: 'person', color:'#2b85e4',size:'50px'}
                            }),
                            h('strong','  ' + params.row.name)
                        ]);} 
                    },
                    {
                        title: '注册时间',
                        sortable: true,
                        render:(h,params) => {
                            return h('div', [
                               h('strong', Date.formatTimeStamp(params.row.create_time))
                            ]);
                        }
                    },
                    {title:'操作', width:150, align:'center', render:(h,params)=>{
                        return h('div', [
                            h('Button', {
                                props: { type: 'primary', size: 'small' },
                                style: { marginRight: '5px',display:this.showButton("113215") },
                                on: { click: () => { this.check(params.index) } }
                            }, '审核'),
                        ]);
                    }}
                ],
                current:new Member(),
            },
            big_img_url: ""
        }
    },
    computed:{
        member(){
            return this.firm_service_table.current;
        },
        list(){
            return Member.parseList(this.page.list);
        },
        introduce_list() {
            var temp = {};
            for(var key in this.firm_service_introduce.keys) {
                temp[key] = this.member[this.firm_service_introduce.keys[key]];
                // alert(this.member.enterprise_name);
            }
            return;
        }
    },
    methods: {
        search(){
            this.page.current_page = 1;
            this.page.getData();       
        },
        check(index){
            this.$refs['detail'].visible=true;
            this.firm_service_table.current=this.list[index];//当前选中的
        },
        showBIgImg(url){
            this.big_img_url = url;
            this.$refs['bigImg'].visible = true;
        },
        pass(){
            if(!confirm("确认通过审核？")) return;
            this.api.post('check/fs_check_pass', this.firm_service_table.current.serialize(), res => {
                this.$CustomMessage.success("*审核完成！");
                this.$refs['detail'].visible=false;
                this.page.getData(); 
            });
        },
        fail(){
            //显示审核未通过原因文本框，并且需要输入审核未通过的原因
            // document.getElementById('reason').style.display="block";
            if(!this.formItem.is_show) {
                this.formItem.is_show = true;
                return;
            }
            this.$refs["refReason"].validate((valid)=>{
                if(valid){
                    if(this.formItem.textarea.replace(/\s+/, '').replace(/\s+$/,'').length != 0){//this.formItem.textarea 审核未通过的原因
                            this.api.post('check/fs_check_fail', {id: this.firm_service_table.current.id, reason: this.formItem.textarea}, res => {
                            this.$CustomMessage.success("*审核完成！");
                            this.$refs['detail'].visible=false;
                            this.page.getData();
                            });
                        }else{
                            this.$CustomMessage.error('*审核未通过原因不能是一系列空格');
                        }
                    }else{
                        this.$CustomMessage.error('请输入审核未通过的原因');
                    }    
            })   
        }
    }
}
</script>
<style scoped>
    .sheet p {
        margin: 5px;
    } 
    .sheet table {
        font-family: Verdana;
        font-weight: bold;  
        border-width: 1px;    
        width: 660px;
        border-collapse: collapse;
    }
    .sheet table thead th{        
        background-color: rgb(81, 130, 187);
        color: #fff;
        border-bottom-width: 0;
    }
    .sheet table tr {
        border-bottom-width: 0;
    }
    .sheet table td {
        border-right: solid 1px rgb(81, 130, 187);  
    }
    .sheet table tr, .sheet table th {
        border-width: 1px;
        border-style: solid;
        border-color: rgb(81, 130, 187);
    }
    .sheet table td, .sheet table th {
        padding: 5px 10px;
        font-size: 13px;
        /* font-family: Verdana;
        font-weight: bold; */
    }
    
</style>
